import React from "react";
import { TouchableOpacity, Text, StyleSheet } from "react-native";
import Svg, { Circle, CircleProps, Rect, RectProps } from 'react-native-svg';

interface MySVGCompProps {
  onPress: () => void;
  rects: [RectProps];
  circles: [CircleProps];
}

export const MySVGComp = ({ onPress, rects, circles }: MySVGCompProps) => {
  return (
    <TouchableOpacity style={styles.container} onPress={onPress}>
      <Svg height="50%" width="50%" viewBox="0 0 100 100">
        {
          circles.map((item) => {
            return (<Circle cx="50" cy="50" r="45" stroke="blue" strokeWidth="2.5" fill="green" {...item}/>);
          })
        }

        {
          rects.map((item) => {
            return (<Rect x="15" y="15" width="70" height="70" stroke="red" strokeWidth="2" fill="yellow"  {...item} />);
          })
        }
      </Svg>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 32,
    paddingVertical: 8,
    backgroundColor: "purple",
    alignSelf: "flex-start",
    borderRadius: 8,
  },
});
